<template>
	<navbar title="确认订单" :isBack="true"></navbar>

	<view class="page">
		<view class="" style="display: flex;justify-content: center;" v-if="Info.time">
			<u-count-down :timestamp="Info.time" style="color: #F00505;" autoStart @change="onChange">
				<view class="time" style="display: flex;">

					<text class="time__item">{{ timeData.minutes }}分</text>
					<text class="time__item">{{ timeData.seconds }}秒</text>
				</view>
			</u-count-down>
		</view>
		<view class="" style="font-weight: bold;color: #F00505;" v-if="Info.state == '1'">
			待支付
		</view>
		<view class="" style="font-weight: bold;color: #707070;" v-if="Info.state == '2'">
			已完成
		</view>
		<view class="" style="font-weight: bold;color: #707070;" v-if="Info.state == '3'">
			已退款
		</view>
		<view class="" style="margin-top: 20rpx;border-radius: 10rpx;background-color: white;padding: 28rpx;"
			v-if="Info.goods_id > 0">
			<view class="" style="display: flex;">
				<image src="/static/image/place.png" style="min-width: 40rpx;height: 40rpx;max-width: 40rpx;" mode="">
				</image>
				<view class="" style="margin-left: 20rpx;">
					{{Info.name}} {{Info.mobile}} {{Info.province}}{{Info.city}}{{Info.area}}{{Info.address}}
				</view>
			</view>
		</view>
		<!-- 课程信息 -->
		<view class="" style="margin-top: 20rpx;padding: 30rpx;border-radius: 10rpx;background-color: white;">
			<view class="" style="font-weight: bold;">
				课程信息
			</view>
			<view class="course_goods">
				<view class="image">
					<image :src="Info.image" class="image" mode=""></image>
				</view>
				<view class="text">
					<view class="text-content">
						<span style="width: 286rpx;">{{Info.course_name}}</span>
						<view class="price">
							<span class="span">¥</span>
							<span>{{Info.pay_price}}</span>
						</view>
					</view>
					<view class="" style="margin-top: 30rpx;font-size: 26rpx;color: #999999;">
						<span
							style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{Info.introduce}}</span>
					</view>
					<view class="" v-if="Info.goods"
						style="margin-top: 50rpx;display: flex;align-items: center;justify-content: space-between;width: 100%;">
						<view class="" style="width: 70rpx;height: 70rpx;border-radius: 10rpx;">
							<image :src="Info.goods?.goods_cover"
								style="width: 70rpx;height: 70rpx;border-radius: 10rpx;" mode=""></image>
						</view>
						<view class="" style="font-size: 24rpx;">
							{{Info.specs}}
						</view>
						<!-- <view class="" style="font-size: 24rpx;">
							尺码：42
						</view> -->
					</view>
				</view>
			</view>
			<!-- <view class="" style="margin-top: 20rpx;height: 140rpx;display: flex;">
					<view class="" style="min-width: 240rpx;height: 140rpx;border-radius: 10rpx;background-color: rosybrown;">
						
					</view>
					<view class="" style="margin-left: 20rpx;display: flex;flex-direction: column;justify-content: space-between;height: 140rpx;">
						<view class="" style="font-size: 36rpx;">
							新手入门教程
						</view>
						<view class="" style="color: #787878;text-overflow: ellipsis;white-space: nowrap;width: 380rpx;overflow: hidden;">
							课程共12期，涵盖球杆姿势涵盖球杆姿势
						</view>
						<view class="" style="font-size: 32rpx;">
							<span style="font-size: 20rpx;">¥</span>282.00
						</view>
					</view>
				</view> -->
			<view class="" style="display: flex;justify-content: flex-end;" v-if="Info.state == '2' && Info.is_show">
				<view class="" @click="pushVideo"
					style="margin-top: 20rpx;display: flex;justify-content: center;align-items: center;background-color: #5062A7;border-radius: 10rpx;width: 156rpx;height: 60rpx;color:white;">
					视频列表
				</view>
			</view>
		</view>
		<!-- /套餐信息 -->
		<!-- <view class="" style="margin-top: 20rpx;background-color: white;padding: 30rpx;border-radius: 10rpx;">
			<view class="" style="font-weight: bold;">
				套餐信息
			</view>
			<view class=""
				style="height: 188rpx;background-color: rebeccapurple;border-radius: 10rpx;margin-top: 20rpx;">

			</view>
			<view class="" style="margin-top: 20rpx;color: #787878;">
				已选:“男褐色，42”
			</view>
		</view> -->
		<!-- 订单信息 -->
		<view class="" style="margin-top: 20rpx;padding: 30rpx;background-color: white;border-radius: 10rpx;">
			<view class="" style="margin-bottom: 28rpx;font-weight: bold;">
				订单信息
			</view>
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="">
					订单编号
				</view>
				<view class="">
					{{Info.order_no}}
				</view>
			</view>
			<view class="" style="margin-top: 36rpx;display: flex;justify-content: space-between;">
				<view class="">
					下单时间
				</view>
				<view class="">
					{{Info.create_time}}
				</view>
			</view>
			<view class="" style="margin-top: 36rpx;display: flex;justify-content: space-between;">
				<view class="">
					支付方式
				</view>
				<view class="">
					微信支付
				</view>
			</view>
			<view class="" v-if="Info.pay_time" style="margin-top: 36rpx;display: flex;justify-content: space-between;">
				<view class="">
					支付时间
				</view>
				<view class="">
					{{Info.pay_time}}
				</view>
			</view>
		</view>
		<!-- 物流信息 -->
		<view class="" style="padding: 30rpx;border-radius: 10rpx;background-color: white;margin-top: 20rpx;"
			v-if="Info.delivery_name && Info.delivery_no">
			<view class="" style="padding-bottom: 30rpx;border-bottom: 1rpx solid #F5F6F8;font-weight: bold;">
				物流信息
			</view>
			<view class="" style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
				<view class="">
					{{Info.delivery_name}}
				</view>
				<view class="">
					{{Info.delivery_no}}
				</view>
				<view class="" style="color: #5062A7;" @click="openLogistics">
					查看物流>
				</view>
			</view>
		</view>
		<u-popup v-model="delivery_model" :border-radius="50" mode="bottom" @close="delivery_model=false"
			style="position: relative;">
			<image class="chahaoC" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/colse_chooseshop.png"
				mode="aspectFit" @click="delivery_model=false"></image>
			<logistics :logData="delivery_info" :list="delivery_list" :imageUrl="imageUrl"></logistics>
		</u-popup>
	</view>
	<view class="" v-if="Info.state == '1' && Info.time">
		<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;">
			<view class="" style="display: flex;height: 100rpx;width: 100%;">
				<view class=""
					style="flex: 1;display: flex;justify-content: center;align-items: center;background-color: white;font-size: 32rpx;">
					总计：<span style="font-weight: bold;color: #F00505;">¥{{Info.pay_price}}</span>
				</view>
				<view class="" @click="cancel"
					style="flex: 1;display: flex;justify-content: center;align-items: center;background-color: #D8D8D8;font-size: 32rpx;">
					取消订单
				</view>
				<view class="" @click="pay"
					style="flex: 1;display: flex;justify-content: center;align-items: center;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);font-size: 32rpx;color: white;">
					立即支付
				</view>
			</view>
		</view>
		<u-modal v-model="modalShow" @confirm="modelConfirm" content="请确认是否要取消该订单？" title="取消订单" show-cancel-button
			:confirm-style="{'color':'white','background':'#5062A7'}"></u-modal>
	</view>

</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import logistics from './logistics.vue'
	import { orderDetail, orderLogistics, orderCancel } from '@/service/api/index'
	import { onLoad } from '@dcloudio/uni-app'
	import tools from '@/utils/tools';
	const delivery_model = ref(false);
	const modalShow = ref(false)
	const imageUrl = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/';
	const delivery_info = reactive({
		delivery_no: '123456',
		address: "安徽省合肥是"
	})
	const timeData = ref({
		minutes: "",
		seconds: ""
	})
	const delivery_list = ref([

	])
	const Info = reactive({
		address: "",
		area: "",
		city: "",
		course_id: "",
		delivery_name: "",
		delivery_no: "",
		delivery_time: "",
		goods: {
			goods_cover: ""
		},
		goods_id: "",
		id: "",
		image: "",
		introduce: "",
		mobile: "",
		name: "",
		order_no: "",
		pay_price: "",
		pay_time: "",
		province: "",
		specs: "",
		state: "",
		user_id: "",
		course_name: "",
		create_time: "",
		time: "",
		is_show:""
	})
	const id = ref('')
	onLoad((options) => {
		id.value = options.id;
		getData()
	})

	//支付
	const pay = async () => {

		tools.navTo('/pagesB/order/pay?id=' + Info.id)
	}
	const onChange = (e) => {
		timeData.value = e;
		if (timeData.value.minutes == '0' && timeData.value.seconds == '0') {
			modelConfirm()
		}
		console.log(e);
	}
	//取消订单
	const cancel = () => {

		modalShow.value = true;

	}
	//确定取消订单
	const modelConfirm = async () => {
		const res = await orderCancel({ id: Info.id });
		if (res.code == 1) {
			tools.showToast(res.msg);
			setTimeout(() => {
				//tools.navTo('/pagesB/mine/mineStudent/index')
				uni.navigateBack();
			}, 500)

		}
		modalShow.value = false;
	}
	const getData = async () => {
		const res = await orderDetail({ id: id.value });
		for (let i in Info) {
			Info[i] = res.msg[i]
		}
		if (Info.time <= '0') {
			modelConfirm()
		}
		//getOrderLogistics()
		delivery_info.delivery_no = Info.delivery_no;
		delivery_info.address = Info.province + Info.city + Info.area + Info.address;

	}
	//查看物流
	const openLogistics = () => {
		delivery_model.value = true;
		getOrderLogistics()
	}
	//物流跟踪
	const getOrderLogistics = async () => {
		const res = await orderLogistics({ id: Info.id })
		//delivery_info.delivery_no
		delivery_list.value = res.msg.logistics_data.list;
		console.log(res.msg);
	}
	//视频列表
	const pushVideo = () => {

		tools.navTo('/pagesB/mine/mineStudent/videoList?course_id=' + Info.course_id)
		// uni.navigateTo({
		// 	url: '/pagesB/mine/mineStudent/videoList'
		// })
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		padding: 30rpx 30rpx 30rpx 30rpx;
		background-color: #F8F8F9;
		overflow: hidden;
	}

	.chahaoC {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		top: 30rpx;
		right: 30rpx;
	}

	.course_goods {
		margin-top: 24rpx;
		display: flex;
		//align-items: center;

		.image {
			width: 240rpx;
			height: 140rpx;
			border-radius: 10rpx;

		}

		.text {
			//height: 140rpx;
			display: flex;
			flex-direction: column;
			width: 100%;
			// justify-content: space-between;
			margin-left: 20rpx;

			.text-content {
				font-size: 32rpx;
				display: flex;
				//align-items: center;
				justify-content: space-between;
			}

			.price {
				color: #F00505;
				font-size: 36rpx;

				.span {
					font-size: 20rpx;
				}
			}
		}
	}
</style>